<template>
  <div class="home">
    <el-row :gutter="16" class="module1">
      <el-col :lg="6" :md="10" class="m1">
        <div class="module m1-1" @mouseover="keysHandleMouseOver" @mouseleave="keysHandleMouseLeave">
          <div class="title">关键数据</div>
          <div class="key-btn">
            <el-carousel ref="carousel" class="key-group" :autoplay="false" indicator-position="none" arrow="always">
              <el-carousel-item v-for="(item, iIndex) in keyList" :key="iIndex">
                <!--                <el-radio-button :value="item.value" :key="item.value" class="key-item">{{ item.label }}</el-radio-button>-->
                <el-radio-group v-model="key" size="large" class="group">
                  <el-radio-button
                    v-for="(i, sIindex) in item"
                    :value="i.value"
                    :key="i.value"
                    class="key-item"
                    @click="keyClickHandle(sIindex, iIndex)"
                  >
                    {{ i.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="s-title">
            <div class="line"></div>
            {{ keyTitleName[key] }}
          </div>
          <div class="key-content" v-if="key === 'risk'">
            <div class="k-item" v-for="item in keyDataList" :key="item.key">
              <img :src="item.img" />
              <div class="k-number">{{ item.value }}</div>
              <div class="k-name">{{ item.name }}</div>
            </div>
          </div>
          <div class="key-content alarm" v-if="key === 'alarm'">
            <div class="img-content">
              <img src="@/assets/images/alarm.png" />
              <div class="main">
                <div class="m1">10</div>
                <div class="m2">24小时告警总数</div>
              </div>
            </div>
            <div class="msg-content">
              <div>当前待处置告警<span class="count">10</span></div>
              <div>未完成工单告警<span class="count">10</span></div>
              <div>重点关注待处置告警<span class="count">10</span></div>
            </div>
          </div>
          <div class="key-content system" v-if="key === 'system'">
            <div class="img-content">
              <img src="@/assets/images/system.png" />
              <div class="main">
                <div class="m2">对接系统数量</div>
                <div class="m1">3</div>
              </div>
            </div>
            <div class="msg-content">
              <div>接口响应缓慢<span class="count">10</span></div>
              <div>接口需求异常<span class="count">10</span></div>
            </div>
          </div>
          <div class="key-content asset" v-if="key === 'asset'">
            <div class="img-content">
              <img src="@/assets/images/asset.png" />
              <div class="main">
                <div class="m1">100</div>
                <div class="m2">设备总数</div>
              </div>
            </div>
            <div class="msg-content">
              <div>当前告警设备<span class="count">10</span></div>
            </div>
          </div>
          <div class="key-content bill" v-if="key === 'bill'">
            <div class="img-content">
              <img src="@/assets/images/bill.png" />
              <div class="main">
                <div class="m1">¥100</div>
                <div class="m2">本月账单金额</div>
              </div>
            </div>
            <div class="msg-content">
              <div>当日账单金额<span class="count">¥10</span></div>
            </div>
          </div>
          <div class="key-content capacity" v-if="key === 'capacity'">
            <div class="item">
              <div class="a">CPU当前可用</div>
              <div class="b"><span class="l-text">2000</span>核</div>
            </div>
            <div class="item">
              <div class="a">内存当前可用</div>
              <div class="b"><span class="l-text">2000</span>GB</div>
            </div>
            <div class="item">
              <div class="a">存储当前可用</div>
              <div class="b"><span class="l-text">2000</span>GB</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :lg="18" :md="14">
        <div class="module m2">
          <div class="m2-1">
            <!--                        <el-select v-model="activeName" placeholder="Select" style="width: 160px" @change="changeToDoTab">-->
            <!--                          <el-option v-for="item in todoTypeList" :key="item.key" :label="item.name" :value="item.key" />-->
            <!--                        </el-select>-->
            <el-tabs v-model="activeName" class="todoTabs" @tab-change="changeToDoTab">
              <el-tab-pane label="待办工单" name="ticket">
                <ProTable
                  ref="proTableRef"
                  title="待办工单"
                  :columns="ticketColumns"
                  :request-api="getTableData"
                  :pagination="true"
                  :show-summary="false"
                  :indent="20"
                  :tool-button="false"
                  :border="false"
                  v-if="activeName === 'ticket'"
                >
                  <template #name="scope">
                    <span
                      :class="[
                        'iconfont',
                        daysDifference(scope.row.create_at) > 3 && iconObj[scope.row.priority]
                          ? 'icon-' + iconObj[scope.row.priority]
                          : 'icon-detail'
                      ]"
                    ></span>
                    <el-tag v-if="scope.row.status === 'REVOKED'" type="info" effect="dark" style="margin-right: 5px">撤</el-tag>
                    <span class="alarm-detail">{{ scope.row.name }}</span>
                  </template>
                  <template #priority="scope">
                    <el-tag :type="alarmTagObj[scope.row.priority]">{{ alarmText[scope.row.priority] }}</el-tag>
                  </template>
                  <template #status="scope">
                    <el-badge
                      is-dot
                      class="item"
                      :color="scope.row.status === 'PENDING' || scope.row.status === '处理中' ? '#389FFFFF' : '#389FFF7F'"
                      :offset="[-5, 8]"
                      :badge-style="{ width: '6px', height: '6px' }"
                    ></el-badge>
                    <span class="text">{{ statusList[scope.row.status] }}</span>
                  </template>
                </ProTable>
              </el-tab-pane>
              <el-tab-pane label="待办告警" name="alarm">
                <ProTable
                  ref="proTableRef"
                  title="待办告警"
                  :columns="alarmColumns"
                  :request-api="getTableData"
                  :pagination="true"
                  :show-summary="false"
                  :indent="20"
                  :tool-button="false"
                  :border="false"
                  v-if="activeName === 'alarm'"
                >
                  <template #name="scope">
                    <span
                      :class="[
                        'iconfont',
                        daysDifference(scope.row.created_time) > 3 && iconObj[scope.row.level_type]
                          ? 'icon-' + iconObj[scope.row.level_type]
                          : 'icon-detail'
                      ]"
                    ></span>
                    <span class="alarm-detail">{{ scope.row.name }}</span>
                  </template>
                  <template #level_type="scope">
                    <el-tag :type="alarmTagObj[scope.row.level_type]">{{ scope.row.level_type }}</el-tag>
                  </template>
                  <template #created_time="scope">
                    <span>{{ moment(scope.row.created_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
                  <template #is_handled="scope">
                    <el-badge
                      is-dot
                      class="item"
                      :color="scope.row.is_handled ? '#389FFFFF' : '#389FFF7F'"
                      :offset="[-5, 8]"
                      :badge-style="{ width: '6px', height: '6px' }"
                    ></el-badge>
                    <span class="text">{{ scope.row.is_handled ? "已处置" : "未处置" }}</span>
                  </template>
                </ProTable>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="m2-2">
            <div
              v-for="(item, i) in dateTimeList"
              @click="switchDate(item.value, i === dateTimeList.length - 1 ? true : false)"
              :key="item.date"
              :class="['dateTime-item', activeDate === item.value ? 'active' : '']"
            >
              <div class="d-content">
                <div class="d-time">{{ item.date }}</div>
                <div class="d-count">
                  <el-icon><Tickets /></el-icon><span class="l-span">{{ item.count }}</span>
                  <span>条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="module2">
      <el-col :span="6">
        <div class="module m3-1">
          <div class="title">更多功能</div>
          <div class="entry-content">
            <div class="e-item" v-for="item in quickEntryList" :key="item.icon" @click="to(item.path, item.out ? true : false)">
              <span :class="['iconfont', 'icon-' + item.icon]"></span>
              <span class="e-name">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="module m3-2">
          <div class="title">快捷登录</div>
          <div class="qLogin-content">
            <div class="l-item" v-for="item in quickLoginList" :key="item.icon">
              <span :class="['iconfont', 'icon-' + item.icon]"></span>
              <span class="l-name">{{ item.name }}</span>
              <el-button type="primary" link class="go"> 点击进入&nbsp;&nbsp;>></el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" class="m4">
        <el-row :gutter="16" class="m4-1">
          <el-col :span="15">
            <div class="module m4-1-1">
              <div class="title">
                通知公告<el-button type="primary" link class="more" @click="to('/notice_management')">
                  更多&nbsp;&nbsp;>>
                </el-button>
              </div>
              <div class="announcement-content">
                <div class="a-item" v-for="item in announcementList" :key="item.id">
                  <span :class="['dot', item.read_at ? 'yes' : 'no']"></span>
                  <el-tag :type="alarmTagObj[item.level]" class="tag">{{ alarmText[item.level] }}</el-tag>
                  <span class="a-content" :title="item.name" @click="announcementView(item.id)">
                    {{ item.name }}
                  </span>
                  <span class="update-time" :title="item.created_at">{{ item.created_at }}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="module m4-1-2">
              <div class="title">
                每日报告<el-button type="primary" link class="more" @click="to('/view')"> 更多&nbsp;&nbsp;>> </el-button>
              </div>
              <div class="dailyReport-content">
                <div class="r-item" v-for="item in dailyReportList" :key="item.id">
                  <span :class="['dot', item.read_at ? 'yes' : 'no']"></span>
                  <span class="r-content" :title="item.name" src="javascript: void(0);" @click="viewReport(item.id)">
                    {{ item.name }}
                  </span>
                  <span class="update-time" :title="item.created_at">{{ item.created_at }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="module m4-2">
          <div class="s-title">
            <div class="line"></div>
            平台运行
          </div>
          <div class="m4-2-1">
            <echarts :option="runOption" :resize="true" :key="globalStore.isDark + ''"></echarts>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="overview">
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useGlobalStore } from "@/stores/modules/global";
import Echarts from "@/components/ECharts/index.vue";
import zdgzgj from "@/assets/images/keys/zdgzgj.png";
import gwgjy from "@/assets/images/keys/gwgjy.png";
import fwqyc from "@/assets/images/keys/fwqyc.png";
import yzjyc from "@/assets/images/keys/yzjyc.png";
import jhjyc from "@/assets/images/keys/jhjyc.png";
import yzjypccjq from "@/assets/images/keys/yzjypccjq.png";
import { getNoticeList, noticeView } from "@/api/modules/sysManagement/noticeManagement";
import { getReportList, reportView } from "@/api/modules/reportManagement/reportView";
import { getPendingTicketListApi, getTicketDaily } from "@/api/modules/ticket/pending";
import { getAlarmStatic, getWarningList } from "@/api/modules/warning/warning24Hours";
import { useRouter } from "vue-router";
import moment from "moment/moment";
const router = useRouter();
const globalStore = useGlobalStore() || {};
const key = ref<string>("risk");
const activeName = ref<string>("ticket");
const keyList = ref<any>([
  [
    {
      value: "risk",
      label: "风险关注"
    },
    {
      value: "alarm",
      label: "告警汇总"
    },
    {
      value: "system",
      label: "对接系统"
    },
    {
      value: "asset",
      label: "资产设备"
    }
  ],
  [
    {
      value: "bill",
      label: "账单汇总"
    },
    {
      value: "capacity",
      label: "容量汇总"
    }
  ]
]);
const keyTitleName = ref<any>({
  risk: "当日应关注风险",
  alarm: "24小时告警",
  system: "对接系统情况",
  asset: "资产设备",
  bill: "运维账单",
  capacity: "资源可用容量"
});
const keyDataList = ref<any>([
  {
    key: "zdgzgj",
    value: 2,
    name: "重点关注告警",
    img: zdgzgj
  },
  {
    key: "gwgjy",
    value: 5,
    name: "高危告警源",
    img: gwgjy
  },
  {
    key: "fwqyc",
    value: 6,
    name: "服务器异常",
    img: fwqyc
  },
  {
    key: "yzjyc",
    value: 11,
    name: "云主机异常",
    img: yzjyc
  },
  {
    key: "jhjyc",
    value: 12,
    name: "交换机异常",
    img: jhjyc
  },
  {
    key: "yzjypccjq",
    value: 13,
    name: "主机硬存储紧缺",
    img: yzjypccjq
  }
]);
// 待办日历
let dateTimeList = ref<any>([]);
// 获取七天前的日期
const changeToDoTab = value => {
  console.log(value);
  switch (value) {
    case "ticket":
      getTicktCount();
      break;
    case "alarm":
      getAlarmCount();
      break;
    default:
      getTicktCount();
  }
};
const activeDate = ref<string>("");
const isBefore = ref<boolean>(false);
const getPreviousSevenDays = () => {
  const today = new Date();
  for (let i = 0; i < 7; i++) {
    const previousDate = new Date(today);
    previousDate.setDate(today.getDate() - i); // 设置为今天减去 i 天
    dateTimeList.value.push({
      date: i === 6 ? previousDate.toISOString().split("T")[0] + "及以前" : previousDate.toISOString().split("T")[0],
      value: previousDate.toISOString().split("T")[0],
      count: 0
    });
  }
};
getPreviousSevenDays();
const currentDate: any = new Date();
const daysDifference = target => {
  const targetDate: any = new Date(target);
  const timeDiff = currentDate - targetDate; // 计算时间差（毫秒）
  return Math.ceil(timeDiff / (1000 * 3600 * 24)); // 转换为天数
};
// 统计工单待办数量
const getTicktCount = async () => {
  try {
    const { data } = await getTicketDaily();
    dateTimeList.value.map(item => {
      if (data.hasOwnProperty(item.value)) {
        item.count = data[item.value];
      } else {
        item.count = 0;
      }
    });
  } catch {
    dateTimeList.value.map(dItem => {
      dItem.count = 0;
    });
  }
};
// 统计告警待办数量
const getAlarmCount = async () => {
  const params = {
    start_time: dateTimeList.value[dateTimeList.value.length - 1].value + " 00:00:00",
    end_time: dateTimeList.value[0].value + " 23:59:59",
    is_handlerd: false
  };
  try {
    const { data } = await getAlarmStatic(params);
    data.map(item => {
      dateTimeList.value.map(dItem => {
        if (item["date"] === dItem.value) {
          dItem.count = item["count"];
        }
      });
    });
  } catch {
    dateTimeList.value.map(dItem => {
      dItem.count = 0;
    });
  }
};
getTicktCount();
// ProTable 实例
const proTableRef = ref<ProTableInstance>();
const switchDate = (date, before) => {
  if (activeDate.value !== date) {
    activeDate.value = date;
  } else {
    activeDate.value = "";
  }
  isBefore.value = before;
  proTableRef.value?.reset();
  proTableRef.value?.getTableList();
};
const getTableData = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  activeDate.value && !isBefore.value ? (newParams.start_time = activeDate.value + " 00:00:00") : null;
  activeDate.value ? (newParams.end_time = activeDate.value + " 23:59:59") : null;
  switch (activeName.value) {
    case "ticket":
      // 获取待办工单列表
      return getPendingTicketListApi(newParams);
      break;
    case "alarm":
      newParams.is_handled = false;
      return getWarningList(newParams);
      break;
    default:
      return getPendingTicketListApi(newParams);
  }
};
// const switchType = () => {};
// 更多功能
const quickEntryList = ref<any>([
  {
    name: "新建工单",
    path: "/new_ticket",
    icon: "xinjiangongdan"
  },
  {
    name: "报告查看",
    path: "/view",
    icon: "viewrepo"
  },
  {
    name: "大屏投放",
    path: "",
    icon: "dapingtoufang"
  },
  {
    name: "机房视图",
    path: "/assetPanel",
    icon: "zichanmianban"
  },
  {
    name: "账单管理",
    path: "/bill/#/bill/billOverview",
    icon: "zhangdanguanli",
    out: true
  },
  {
    name: "24小时待处置",
    path: "/warning_24hours",
    icon: "xiaoshi"
  }
]);
// 快捷登录
const quickLoginList = ref<any>([
  {
    name: "U-center",
    path: "",
    icon: "touxiang"
  },
  {
    name: "NGSOC",
    path: "",
    icon: "touxiang"
  },
  {
    name: "安全资源池",
    path: "",
    icon: "module"
  }
]);
// 通知公告
const announcementList = ref<any>([
  {
    type: "danger",
    typeName: "紧急",
    content: "强化搜索人群突破引流瓶占强化搜索人群突破引流瓶占强化搜索人群占强化搜索人群",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "danger",
    typeName: "紧急",
    content: "强化搜索人群突破引流瓶占强化搜索人群突破引流瓶占强化搜索人群占强化搜索人群",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "warning",
    typeName: "重要",
    content: "强化搜索人群突破引流瓶占强化搜索人群突破引流瓶占强化搜索人群占强化搜索人群",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "primary",
    typeName: "提示",
    content: "强化搜索人群突破引流瓶占强化搜索人群突破引流瓶占强化搜索人群占强化搜索人群",
    updateTime: "2024-01-12  12:06:16"
  }
]);
// 每日报告
const dailyReportList = ref<any>([
  {
    type: "yes",
    name: "报告名称报告名称报告名称报告名称报告名称",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "yes",
    name: "报告名称报告名称报告名称报告名称报告名",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "no",
    name: "报告名称报告名称报告名称报告名称报告名称",
    updateTime: "2024-01-12  12:06:16"
  },
  {
    type: "no",
    name: "报告名称报告名称报告名称报告名称报告名称",
    updateTime: "2024-01-12  12:06:16"
  }
]);
// 表格配置项（待办告警）
const alarmColumns = reactive<ColumnProps<any>[]>([
  { prop: "name", label: "标题", minWidth: 300 },
  { prop: "level_type", label: "紧急等级", minWidth: 200 },
  { prop: "is_handled", label: "状态", width: 200 },
  { prop: "created_time", label: "创建时间", width: 200 }
]);
// 表格配置项（待办工单）
const ticketColumns = reactive<ColumnProps<any>[]>([
  { prop: "name", label: "标题", minWidth: 300 },
  { prop: "priority", label: "紧急等级", minWidth: 200 },
  { prop: "status", label: "状态", width: 200 },
  { prop: "create_at", label: "创建时间", width: 200 }
]);
// 工单状态
const statusList = reactive({
  REVIEW: "审核中",
  PENDING: "处理中",
  REJECTED: "已退回",
  REVOKED: "已撤回",
  FINISHED: "完成"
});
// 告警等级对应的图标
const iconObj = ref<any>({
  EMERGENCY: "alarm",
  3: "alarm",
  高危: "alarm",
  危急: "alarm",
  重要: "alarm",
  中危: "alarm",
  紧急: "alarm",
  IMPORTANT: "alarm",
  2: "alarm",
  NORMAL: "detail",
  1: "detail",
  次要: "detail",
  低危: "detail"
});
// 告警等级对应的tag颜色
const alarmTagObj = ref<any>({
  EMERGENCY: "danger",
  2: "warning",
  重要: "warning",
  中危: "warning",
  紧急: "warning",
  IMPORTANT: "warning",
  3: "danger",
  高危: "danger",
  危急: "danger",
  NORMAL: "primary",
  1: "primary",
  次要: "primary",
  低危: "primary"
});
const alarmText = ref<any>({
  IMPORTANT: "重要",
  3: "特急",
  EMERGENCY: "紧急",
  2: "紧急",
  NORMAL: "普通",
  1: "一般"
});
const to = function (path, out?: boolean | undefined) {
  if (out) {
    window.location.href = path;
  } else {
    router.push(path);
  }
};
// 查看公告详情
const announcementView = async id => {
  const { data } = await noticeView(id);
  window.open(data.file_link, "_blank");
  getAnnouncementList();
};
// 查看报告详情
const viewReport = async id => {
  const { data } = await reportView(id);
  window.open(data.file_link, "_blank");
  getDailyReportList();
};
// 查询公告列表
const getAnnouncementList = async () => {
  const { data } = await getNoticeList();
  announcementList.value = data.results.slice(0, 4);
};
// 查询报告列表
const getDailyReportList = async () => {
  const { data } = await getReportList();
  dailyReportList.value = data.results.slice(0, 4);
};
getAnnouncementList();
getDailyReportList();
watch(
  () => globalStore.isDark,
  () => {
    option();
  }
);
// 平台运行
let runOption = ref<any>();
const option = () => {
  runOption.value = {
    color: [globalStore.isDark ? "#FFFFFF72" : "#00000072", "#1F8CF2FF", "#0ACAD1FF", "#FBB225FF"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["综合运行系统分", "Ucenter系统分", "NGSOC系统分", "安全资源池系统分"],
      icon: "rect",
      itemWidth: 10,
      itemHeight: 2,
      itemGap: 32,
      padding: 16,
      right: 0,
      top: 0,
      textStyle: {
        color: globalStore.isDark ? "#FFFFFF72" : "#00000072"
      }
    },
    grid: {
      left: 15,
      right: 15,
      bottom: 10,
      top: 60,
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["19:20", "19:30", "19:40", "19:50", "20:00", "20:10", "20:20"],
      axisLine: {
        lineStyle: {
          color: globalStore.isDark ? "#FFFFFF19" : "#F7F7F7FF",
          width: 3
        }
      },
      axisLabel: {
        color: globalStore.isDark ? "#FFFFFF99" : "rgba(0, 0, 0, 0.6)"
      }
    },
    yAxis: {
      name: "单位：个",
      nameGap: 23,
      nameTextStyle: {
        color: globalStore.isDark ? "#FFFFFF99" : "rgba(0, 0, 0, 0.6)"
      },
      axisLabel: {
        color: globalStore.isDark ? "#FFFFFF99" : "rgba(0, 0, 0, 0.6)"
      },
      splitLine: {
        lineStyle: {
          color: globalStore.isDark ? "#FFFFFF26" : "#EDEDEDFF",
          type: "dashed"
        }
      },
      min: 0
    },
    series: [
      {
        name: "综合运行系统分",
        type: "line",
        showSymbol: false,
        lineStyle: {
          width: 1.6
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "Ucenter系统分",
        type: "line",
        showSymbol: false,
        lineStyle: {
          width: 1.6
        },
        data: [220, 110, 191, 234, 290, 200, 310]
      },
      {
        name: "NGSOC系统分",
        type: "line",
        showSymbol: false,
        lineStyle: {
          width: 1.6
        },
        data: [150, 232, 201, 100, 190, 330, 410]
      },
      {
        name: "安全资源池系统分",
        type: "line",
        showSymbol: false,
        lineStyle: {
          width: 1.6
        },
        data: [320, 200, 160, 334, 390, 260, 130]
      }
    ]
  };
};
// 关键数据轮训
let index = 0;
let activeIndex = 0;
const carousel = ref();
let rotationalIntervalId: any = null;
// 开始轮训，3s轮训一次
const startPolling = () => {
  rotationalIntervalId = setInterval(function () {
    if (
      activeIndex + 1 > keyList.value.length ||
      (activeIndex + 1 === keyList.value.length && index >= keyList.value[activeIndex].length)
    ) {
      activeIndex = 0;
      carousel.value ? carousel.value.setActiveItem(activeIndex) : null;
      index = 0;
    }
    if (index >= 4) {
      // 下一页
      activeIndex++;
      carousel.value ? carousel.value.setActiveItem(activeIndex) : null;
      index = 0;
    }
    key.value = keyList.value[activeIndex][index].value;
    index++;
  }, 3000);
};
startPolling();
const keyClickHandle = (i, j) => {
  index = i;
  activeIndex = j;
};
option();
// 关键数据模块鼠标移入事件监听
const keysHandleMouseOver = () => {
  rotationalIntervalId ? clearInterval(rotationalIntervalId) : null;
};
// 关键数据模块鼠标移出事件监听
const keysHandleMouseLeave = () => {
  startPolling();
};
let refreshIntervalId: any = null;
onMounted(() => {
  // 30s刷新一次数据
  refreshIntervalId = setInterval(() => {
    // 公告
    getAnnouncementList();
    // 报告
    getDailyReportList();
    // 待办告警、工单
    proTableRef.value?.getTableList();
  }, 30000);
});
// 在组件销毁之前执行的逻辑
onBeforeUnmount(() => {
  clearInterval(rotationalIntervalId);
  clearInterval(refreshIntervalId);
});
</script>
<style scoped lang="scss">
@import "index";
</style>
